<template>
  <div class="footer_body">
    <div class="one_footer" v-for="(data, index) in navList" :key="index" @click="goRouter(data)"
      :class="[data.nav_url === defaultActive ? 'nav_click_icon' : 'nav_icon']">
      <div class="iconfont_body">
        <span :class="[data.nav_url === defaultActive ? data.nav_click_icon : data.nav_icon, 'iconfont']"></span>
      </div>
      <div class="one_footer_name">
        <span>{{ data.nav_name }}</span>
      </div>

    </div>
  </div>
</template>
<script setup name="footer_body">
import { ref, watchEffect  } from 'vue'
import { useRouter, useRoute } from "vue-router";
const defaultActive = ref(null)
const router = useRouter()
const route = useRoute()
defaultActive.value = router.currentRoute.value.path


watchEffect(() => {
  defaultActive.value = route.path
})

let navList = ref([
  {
    nav_name: '首页',
    nav_url: '/',
    nav_icon: 'icon-shouye',
    nav_click_icon: 'icon-shouye1',
  },
  {
    nav_name: '功能',
    nav_url: '/featurelist',
    nav_icon: 'icon-kuangjiaguanli2',
    nav_click_icon: 'icon-kuangjiaguanli1',
  },
  {
    nav_name: '组织',
    nav_url: '/organization',
    nav_icon: 'icon-yonghuguanli',
    nav_click_icon: 'icon-yonghuguanli1',
  },
  {
    nav_name: '我的',
    nav_url: '/mine',
    nav_icon: 'icon-customer-official',
    nav_click_icon: 'icon-customer-official-fill',
  },
])



console.log(defaultActive.value)

function goRouter(data) {
    router.push(data.nav_url)
}
</script>
<style scoped lang="scss">
.footer_body {
  width: 100%;
  height: 100%;
  display: flex;
  display: -moz-flex;
  justify-content: space-between;
  align-items: center;
  display: -webkit-flex;
  box-sizing: border-box;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .one_footer {
    flex: 1;
    display: flex;
    display: -moz-flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

    .iconfont_body {
      margin-bottom: 0.051rem;

      .iconfont {
        font-size: 0.615rem;
      }
    }

    .one_footer_name {
      font-size: 0.359rem
    }
  }

  .nav_icon {
    color: #777777
  }

  .nav_click_icon {
    color: #1989fa
  }
}
</style>